<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import Card from "../components/Card.vue";
import useSearchProjecValue from "../hooks/useSearchProjecValue";
import SelectBlock from "../components/SelectBlock.vue";
import RadioBlock from "../components/RadioBlock.vue";
import useMessage from "../hooks/useMessage";
import { useRoute, useRouter } from "vue-router";
import {
    deleteProject,
    useProjectDetail,
    useUpdateProject,
} from "../api/project";
import { Dialog } from "vant";
//初始化
const route = useRoute();
const router = useRouter();
const isBlank = ref(false);
const { typeOption, statusOption, VisibleOptions } = useSearchProjecValue();
VisibleOptions.push({
    value: 0,
    text: "不公开",
});

const project = ref({
    name: "",
    school_id: 1,
    introduce: "",
    tags: "",
    type: 0,
    status: 0,
    visible: 1,
    member_visible: 1,
    plans_visible: 1,
    logs_visible: 1,
});
onMounted(() => {
    getInfo();
});
//当子可见性大于项目总体可见性时发出警告
watch(
    [
        () => project.value.visible,
        () => project.value.logs_visible,
        () => project.value.member_visible,
        () => project.value.plans_visible,
    ],
    value => {
        ["logs_visible", "member_visible", "plans_visible"].forEach(value => {
            if (project.value.visible < project.value[value]) {
                useMessage("不可大于项目可见性", "warning");
                project.value[value] = project.value.visible;
            }
        });
    }
);
//标签效验规则 不能大于10个标签
const tagsValidator = value => value.split(" ").length <= 10;
//获取项目数据
const getInfo = async () => {
    const res = await useProjectDetail(route.params.pid);
    if (res.code === 500) {
        isBlank.value = true;
    } else {
        project.value = res.data;
    }
};
//提交数据
const onSubmit = () => {
    useUpdateProject(project.value).then(res => {
        router.push("/project/detail/" + route.params.pid);
    });
};
//删除项目
const onDelete = () => {
    Dialog.confirm({
        title: "确认删除",
        message: "删除后项目不可恢复，确认删除？",
    }).then(() => {
        deleteProject(route.params.pid).then(res => {
            if (res.code == 200) {
                router.push("/home");
            }
        });
    });
};
</script>

<template>
    <div v-if="!isBlank" class="container">
        <van-form @submit="onSubmit" label-width="4em">
            <van-cell-group inset>
                <van-field
                    v-model="project.name"
                    :maxlength="50"
                    name="name"
                    label="项目名称"
                    placeholder="请输入项目名称"
                    :rules="[{ required: true, message: '不能为空' }]"
                />
                <van-field
                    v-model="project.introduce"
                    autosize
                    :maxlength="1000"
                    type="textarea"
                    name="introduce"
                    label="介绍"
                    placeholder="请输入介绍"
                />
                <van-field
                    v-model="project.tags"
                    autosize
                    :maxlength="200"
                    type="textarea"
                    name="tags"
                    label="标签"
                    placeholder="设置标签让更多人看到，不同标签请用空格隔开"
                    :rules="[
                        {
                            validator: tagsValidator,
                            message: '标签不能多于10个',
                        },
                    ]"
                />
                <van-field name="type" label="项目类型">
                    <template #input>
                        <RadioBlock
                            :list="typeOption"
                            v-model:value="project.type"
                        ></RadioBlock>
                    </template>
                </van-field>
                <van-field name="status" label="项目状态">
                    <template #input>
                        <RadioBlock
                            :list="statusOption"
                            v-model:value="project.status"
                        ></RadioBlock>
                    </template>
                </van-field>
                <van-field name="status" label="项目可见">
                    <template #input>
                        <RadioBlock
                            :list="VisibleOptions"
                            v-model:value="project.visible"
                        ></RadioBlock>
                    </template>
                </van-field>
                <van-field name="status" label="日志可见">
                    <template #input>
                        <RadioBlock
                            :list="VisibleOptions"
                            v-model:value="project.logs_visible"
                        ></RadioBlock>
                    </template>
                </van-field>
                <van-field name="status" label="成员可见">
                    <template #input>
                        <RadioBlock
                            :list="VisibleOptions"
                            v-model:value="project.member_visible"
                        ></RadioBlock>
                    </template>
                </van-field>
                <van-field name="status" label="计划可见">
                    <template #input>
                        <RadioBlock
                            :list="VisibleOptions"
                            v-model:value="project.plans_visible"
                        ></RadioBlock>
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px">
                <van-button
                    round
                    block
                    type="danger"
                    @click.prevent="onDelete"
                    native-type="submit"
                    style="margin-bottom: 10px"
                >
                    删除项目
                </van-button>
                <van-button
                    round
                    block
                    color="var(--main-color)"
                    native-type="submit"
                >
                    提交修改
                </van-button>
            </div>
        </van-form>
    </div>
    <van-empty v-else description="无该项目" />
</template>

<style scoped>
.container {
    background-color: var(--main-background-color);
    padding: var(--page-padding) 0px;
    min-height: 100%;
}
</style>
